<template>
<!-- 消费记录 -->
 <div class="consumption">
     <header>
          <span><van-icon name="cross" size="1.5rem" @click="tobankCard"/></span>
        <h3>消费记录</h3>
        <span><van-icon name="ellipsis" size="1.5rem"/></span>
     </header>
     <main>
         <div class="main_num">
           <div class="van">
               <!-- <span class="postion" v-if="flag">2021年1月</span> -->
              <select class="vanOne" v-model="value2" id="">
                  <option v-for='(item,index) in options1' :key='index'>{{item.text}}</option>
              </select>
           </div>
           <div class='text'>
               <p>支出￥ {{this.count}}收入￥254.00</p>
               <p>统计<van-icon name="arrow" /></p>
           </div>
         </div>
         <div class="main_pay">
             <dl class="pay_item" v-for="(item,index) in options1" :key='index'>
                <dt>
                  <img src="../../../../images/余额/images/images/images/京东.png" alt="">
                  <p>
                      <span class="payOne">{{item.text}}</span>
                      <span>{{item.title}}</span>
                      <span class="pay_time">1月11日 12:15</span>
                  </p>
                </dt>
                <dd class='payOne'>-{{item.num}}</dd>
             </dl>
         </div>
     </main>
 </div>
</template>

<script>
import Vue from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';
import axios from 'axios'
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
 data(){
     return {
         value1: 0,
      value2: '2021年1月',
      flag:true,
      count:0,
      options1: [
        // { text: '2021年1月',title:'微信支付，八维淘宝', value: 0 ,time:'20.00'},
        // { text: '2021年2月', title:'微信支付，八维淘宝',value: 1,time:'10.00' },
        // { text: '2021年3月',title:'微信支付，八维淘宝', value: 2 ,time:'30.00'},
      ],
     
     }
 },
 methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
  
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    tobankCard(){
        this.$router.push('/layout/my/balace')
    },
     async priceCount(){
      const res=await axios('/getList')
     this.list=res.data.list;
    console.log(res)
      this.list.forEach(item=>{
           return this.count+=item.price*1
      })
      console.log(this.count,'count')

    },
    async getConsumption(){
      const res=await axios('/getConsumption')
      console.log(res,'ddd')
      this.options1=res.data.list
    }
  },
  created(){
      this.priceCount()
      this.getConsumption()
  },
  watch:{
      value2(){
          this.priceCount()
          this.getConsumption()
      }
  }
}

</script>
<style scoped>
.consumption{
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.text{
   color: #979797;
   padding: 0 0.625rem;
   display:flex;
   justify-content: space-between;
   margin-top: 0.625rem;
}
.postion{
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    font-weight: bold;
}
header{
    height: 5.5rem;
    line-height: 5.5rem;
    display: flex;
    justify-content: space-around;
    background-color: #555882;
    color:#fff;
}
header span{
    margin-top: 0.625rem;
}
main{
    margin-top: 0.625rem;
    flex: 1;
    background-color: #f6f6f6;
}
.van{
    height:1.875rem;
    width: 6.25rem;
    margin-top: 0.625rem;
    position: relative;
}
select{
    height:1.875rem;
    font-weight: bold;
    border: none;
    font-size: 1.25rem;
    background-color: #f6f6f6;
}

.xia{
    margin-top: 0.625rem;
    margin-left: -5.625rem;
}
.pay_item{
  display: flex;
  justify-content: space-between;
  padding: 0 1.25rem;
  height: 6.25rem;
  background-color: #fff;
  margin-top: 1.25rem;
}
.pay_item dt{
    display: flex;
    margin-top: 1.25rem;
}
.payOne{
    font-size: 1.25rem;
    font-weight: bold;
    color: #312828;
}
.pay_time{
    color: #c5c5c5;
    margin-top: 0.625rem;
}
dt img{
    width:2.5rem;
    height: 2.5rem;
}
dt p{
    display: flex;
    flex-direction: column;
    margin-left: 0.9375rem;
}
dd{
    margin-top: 1.25rem;
}
</style>